<template>
  <basic-container>
    <el-tabs type="border-card" class="tab-font">
      <el-tab-pane label="搜索"> </el-tab-pane>
      <avue-form ref="form" :option="option" v-model="form">
        <template slot="btn">
          <el-button type="primary" size="small" class="el-icon-search" @click="handleSubmit">搜索</el-button>
          <el-button size="small" class="el-icon-delete" @click="handleCancel">清空</el-button>
        </template>
      </avue-form>
    </el-tabs>
    <el-tabs type="border-card" class="chart-tab tab-font" v-loading.body="chartLoading">
      <el-tab-pane label="明细"> </el-tab-pane>
      <el-row :gutter="20">
        <el-col :span="24">
          <chart-view class="chart-content" :chart-option="currentChartOption" :auto-resize="true" width="100%" height="350px" />
        </el-col>
        <el-col :span="24">
          <chart-view class="chart-content" :chart-option="voltageChartOption" :auto-resize="true" width="100%" height="350px" />
        </el-col>
      </el-row>
    </el-tabs>
  </basic-container>
</template>

<script>
import { option, currentChartOption, voltageChartOption } from '@/views/report/equipmentDataQuery.js';
import ChartView from '@/components/chart/index.vue';
import 'echarts/lib/component/dataZoom';

export default {
  name: 'equipmentDataQuery',
  components: {
    ChartView
  },
  data() {
    return {
      form: {},
      option,
      currentChartOption,
      voltageChartOption,
      chartLoading: false
    };
  },
  methods: {
    async onLoad() {
      // const res = await getEquipmentDataQueryData()
      const voltageSeriesData = this.getVoltageData();
      const currentSeriesData = this.getCurrentData();
      const xAixsData = this.getXAixsData();
      try {
      } catch (e) {
        console.warn(e);
      }
    },
    // 获取电压数据
    getVoltageData(data) {
      const voltageSeriesData = [];
      return voltageSeriesData;
    },
    // 获取电流数据
    getCurrentData(data) {
      const currentSeriesData = [];
      return currentSeriesData;
    },
    // 获取横坐标数据
    getXAixsData(data) {
      const xAixsData = [];
      return xAixsData;
    },
    handleSubmit(form, done) {
      this.$refs.form.validate((valid, done) => {
        if (valid) {
          this.onLoad(true);
          done();
        }
      });
    },
    handleCancel() {
      this.$set(this.currentChartOption.series, 'data', []);
      this.$set(this.voltageChartOption.series, 'data', []);
    }
  }
};
</script>

<style scoped lang="scss">
.chart-tab {
  margin-top: 24px;
  height: calc(100vh - 350px);
  overflow-y: scroll;
}

.tab-font {
  ::v-deep .el-tabs__item {
    color: #606266 !important;
    font-weight: bold;
  }
}
</style>
